<template>
	<view>
		<view class="statistics">
			<image src="../../static/big-icon-1.png" class="big-icon" mode="widthFix"></image>
			<view class="report-title">
				<text class="days">{{sum_1}}</text>
				<text class="unit">天</text>
			</view>
			<view class="sub-title">
				<text>本月签到</text>
			</view>
			<view class="report">
				<view class="column green">
					<text class="column-title">正常签到</text>
					<text class="number">{{sum_1}}</text>
				</view>
				<view class="column orange">
					<text class="column-title">迟到签到</text>
					<text class="number">{{sum_2}}</text>
				</view>
				<view class="column red">
					<text class="column-title">缺勤签到</text>
					<text class="number">{{sum_3}}</text>
				</view>
			</view>
		</view>
		<view class="calendar-container">
			<uni-calendar :insert="true" :lunar="false" :selected="list" 
						@monthSwitch="changeMonth" @confirm="changeMonth"></uni-calendar>
		</view>
	</view>
</template>

<script>
	import uniCalendar from "@/components/uni-calendar/uni-calendar.vue";
	export default {
		components:{
			uniCalendar
		},
		data() {
			return {
				list:[],
				sum_1:0,
				sum_2:0,
				sum_3:0
			}
		},

		onShow:function(){
			let that=this
			let date=new Date()
			let year=date.getFullYear()
			let month=date.getMonth()+1
			that.searchCheckin(that,year,month)
		},

		methods: {
			changeMonth:function(e){
							let that=this
							let year=e.year
							let month=e.month
							that.searchCheckin(that,year,month)
						},
			searchCheckin:function(ref,year,month){
							let that=ref
							that.sum_1=0
							that.sum_2=0
							that.sum_3=0
							that.list.length=0 //清空数据
							that.ajax(that.url.searchMonthCheckin,"POST",{year:year,month:month},function(resp){
								for(let one of resp.data.list){
									if(one.status!=null&&one.status!=""){
										let color=""
										if(one.status=="正常"){
											color="green"
										}
										else if(one.status=="迟到"){
											color="orange"
										}
										else if(one.status=="缺勤"){
											color="red"
										}
										that.list.push({
											date:one.date,
											info:one.status,
											color:color
										})
									}
								}
								that.sum_1=resp.data.sum_1
								that.sum_2=resp.data.sum_2
								that.sum_3=resp.data.sum_3
							})
						}
		}
	}
</script>
<style lang="less">
@import url("my_checkin.less");
</style>
